<section class="mb-3 manual">
    <div class="row">
        <div class="col">
            <div class="card mb-3">
                <div class="card-body">
                    <filter-list request="request" callback="getList(pageIndex)"></filter-list>
                    <hr>
                    <table class="table table-sm table-hover mb-0" cellspacing="0">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col" width="20%">
                                    Setting Key
                                </th>
                                <th scope="col" width="20%">
                                    Value
                                </th>
                                <th scope="col" width="20%">
                                    Description
                                </th>
                                <th scope="col" width="5%">
                                    Category
                                </th>
                                <th scope="col" width="5%" class="text-right">
                                    Actions
                                </th>
                            </tr>
                        </thead>

                        <tbody class="sortable" ng-init="getList()">
                            <tr ng-repeat="item in data.items track by $index" class="sortable-item"
                                sort-model="configuration" sort-model-id="{{item.id}}">
                                <td>
                                    <small><span ng-bind="item.keyword"></span></small>
                                </td>
                                <td>
                                    <small>
                                        <module-data-preview data="item.property" width="50"></module-data-preview>
                                    </small>
                                </td>
                                <td>
                                    <small class="text-black-50"><span ng-bind="item.description"></span></small>
                                </td>
                                <td>
                                    <small class="text-black-50"><span ng-bind="item.category"></span></small>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm btn-group-sm float-right" role="group"
                                        aria-label="Actions">
                                        <a href="/portal/configuration/details/{{item.keyword}}"
                                            class="btn btn-link text-primary">
                                            <span class="fa fa-pen"></span>
                                        </a>
                                        <a href="#" ng-click="remove(item.keyword);" class="btn btn-link text-danger">
                                            <span class="fas fa-trash-alt"></span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">
                    <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                        ul-class="pagination justify-content-end m-0" a-class="page-link"
                        paging-action="getList(page-1)" scroll-top="true"></paging>
                </div>
            </div>

        </div>
    </div>

</section>